Input Form



Input Form



Input Form (card looking)



Bordered Input

Add the w3-border class to create bordered inputs.



Rounded Input

Use any of the w3-round classes to create rounded borders.



Borderless Input

The w3-input class has a bottom border by default. For a borderless input, add the w3-border-0 class.

Default:


Bordered:


Borderless:



Hoverable Inputs

Move the mouse over the input fields:



Animated Inputs

The w3-animate-input class animates the width of an input to 100%. Click on the inputs below to see the effect:




Checkboxes




Radio Buttons



Select Your Free Option



Form Elements in a Grid

In this example, we use W3.CSS' Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width). You will learn more about this later.



Icon Labels

Contact Us